<template>
	<div class="container">
		<loading v-model="isShow" :text="loadText"></loading>
		<sticky :check-sticky-support="false" :offset="0">
			<x-header :title="cateName" class="vux-1px-b"></x-header>
			<grid :show-lr-borders="false" :show-vertical-dividers="true">
				<grid-item v-for="(item,index) in goodTitle" :key="index" :class="item.style" @on-item-click="goodtabbar(index,item.id, item.orderByName)" :label="item.title"></grid-item>
			</grid>
		</sticky>

		<scroller use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore" use-pulldown :pulldown-config="pulldownDefaultConfig" @on-pulldown-loading="refresh" lock-x ref="scrollerBottom" height="-48">
			<div class="shopbox">
				<ul>
					
					<li v-for="(item,index) in shopList" :key="index">
						<router-link :to="{name: 'GoodsInfo', query: { id: item.id }}">
							<x-img :src="serverUrl + item.url" :webp-src="serverUrl + item.url" class="goodpic" error-class="goodpic-error" :offset="300" v-if="render" :scroller="$refs.scrollerBottom" container="#vux_view_box_body"></x-img>
							<p class="englishName">{{item.englishName}}</p>
							<p class="chinaName">{{item.chinaName}}</p>
							<div class="pricebox">
								<div>{{item.price}}<span class="oldprice">{{item.oldprice}}</span></div>
								<div class="discount">{{item.discount}}</div>
							</div>
						</router-link>
					</li>
					
				</ul>
			</div>
			<div class="nomore" v-if="nmtype">暂无数据</div>
		</scroller>
	</div>
</template>

<script>
	import { goodsList } from '@/api/Goods'

	const pulldownDefaultConfig = {
		content: '下拉刷新',
		height: 40,
		autoRefresh: false,
		downContent: '下拉刷新',
		upContent: '释放后刷新',
		loadingContent: '正在刷新...',
		clsPrefix: 'xs-plugin-pulldown-'
	}
	const pullupDefaultConfig = {
		content: '上拉加载更多',
		pullUpHeight: 60,
		height: 40,
		bottom: -60,
		autoRefresh: false,
		downContent: '释放后加载',
		upContent: '上拉加载更多',
		loadingContent: '加载中...',
		defaultContent: '上拉加载更多',
		clsPrefix: 'xs-plugin-pullup-'
	}
	import {
		XHeader,
		Grid,
		GridItem,
		Scroller,
		Sticky,
		XImg,
		numberComma,
		Loading
	} from 'vux'
	export default {
		name: 'Goods',
		components: {
			XHeader,
			Grid,
			GridItem,
			Scroller,
			Sticky,
			XImg,
			Loading
		},
		data() {
			return {
				serverUrl: process.env.SERVER_URL,
				cateName: '商品列表',
				// 筛选条件
				query: {
					'cate_id': 0,
					'page': 1,
					'limit': 10
				},
				nmtype:false,
				loadText: 'Loading',
				isShow: false,
				render: false,
				goodTitle: [{
					title: '人气',
					style: 'hotrelb',
					id: 1,
					orderByName: 'click_count'
				}, {
					title: '价格',
					style: 'hotrelb',
					id: 1,
					orderByName: 'shop_price'
				}, {
					title: '筛选',
					style: 'choseRelb',
					id: -1
				}],
				shopList: [],
				pullupDefaultConfig: pullupDefaultConfig,
				pulldownDefaultConfig: pulldownDefaultConfig
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.scrollerBottom.reset({
					top: 0
				})
				this.render = true;
			})
			this.loadMore();
		},
		methods: {
			goodtabbar(index, id, orderByName) {
				switch(id) {
					case 1:
						this.goodTitle[index].id = 2;
						this.goodTitle[index].style = 'hotrelt';
						this.query.orderByName = orderByName
						this.query.sort = 'desc'
						this.query.page = 1;
						this.fetchData(data => {
							this.shopList = data;
						 });					
						break;
					case 2:
						this.goodTitle[index].id = 1;
						this.goodTitle[index].style = 'hotrelb';
						this.query.orderByName = orderByName
						this.query.sort = 'asc'
						this.query.page = 1;
						this.fetchData(data => { 
							this.shopList = data;
						});	
						break;
					case -1:
						console.log('s');
						break;
				}
			},
			fetchData(callback) {  
				this.isShow = true
				// this.query.cate_id = this.$route.query.id
				goodsList(this.query).then(response => {
					var data = response.goodsList
					if(data){
						callback(data);
						this.$nextTick(() => {   
							this.$refs.scrollerBottom.reset()   
						})
					}else{
						console.log('none')
					}
					this.isShow = false

				});
			},
			refresh() {
				this.query.page = 1;
				this.fetchData(data => {
					this.shopList = data;
					this.$refs.scrollerBottom.enablePullup()
					this.$refs.scrollerBottom.donePulldown();
				})
			},
			loadMore() {
				this.fetchData(data => {
					if (data.length == 0) {
						this.nmtype = true
					}
					if(data.length < 10) {
						this.$refs.scrollerBottom.disablePullup();
					}
					this.shopList = this.shopList.concat(data);
					this.query.page++;
					this.$refs.scrollerBottom.donePullup()
				})
			},
		},

	}
</script>

<style scoped="" lang="less">
	.hotrelb,
	.hotrelt {
		position: relative;
	}
	.container{
		background: #FFF;
	}
	.hotrelb:before,
	.hotrelt:before {
		content: "";
		display: inline-block;
		height: 6px;
		width: 6px;
		border-width: 0 2px 2px 0;
		border-color: #c8c8cd;
		border-style: solid;
		-webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);
		transform: matrix(.71, .71, -.71, .71, 0, 0);
		position: relative;
		top: -2px;
		position: absolute;
		top: 50%;
		margin-top: -2px;
		right: 20px;
	}

	.hotrelt:before {
		border-width: 2px 0 0 2px;
		top: -2px;
		top: 50%;
		margin-top: 2px;
		right: 20px;
	}

	.shopbox {
		padding: 0 15px 100px;
	}

	.shopbox ul {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: flex-start;
		padding-top: 30px;
	}

	.shopbox ul li {
		width: 48%;
		flex: 0 1 auto;
	}

	.goodpic {
		width: 100%;
		height: auto;
	}

	.goodpic-error {
		background-color: #C8C8CD;
	}

	.englishName,
	.chinaName {
		display: block;
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: auto;
		margin-bottom: 2px;
		font-weight: 700;
		text-align: left;
		font-size: 14px;
	}

	.chinaName {
		font-weight: normal;
		font-size: 12px;
	}

	.pricebox {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
		color: #dd2828;
		font-size: 14px;
		font-weight: 700;
	}

	.pricebox .oldprice {
		text-decoration: line-through;
		color: #ccc;
		padding-left: 5px;
		font-weight: normal;
		font-size: 12px;
	}

	.pricebox .discount {
		color: #666;
		font-size: 12px;
	}
	.nomore{
		text-align: center;
		line-break: 40px;
	}
</style>
